import React, { Component } from 'react';
import '../css/Card.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import  axios from  'axios'
import  {Icon} from  'antd-mobile'
@observer class Card extends Component {
    constructor(props) {
        super(props)
        this.state={
            array:[],
            sum:0
        }
    }
    componentDidMount(){
        axios.get('http://www.niuduxiu.com/mobile/cart/cartList.jhtml?memberId='+Mobx.zhanghao)
            .then((item)=>{
                this.setState({
                    array:item.data.returnValue
                })
            })
    }
    render() {
        return (
            <div className="Card">
                <div>
                   <p className='title'>购物车（{this.state.array.length}）</p>
                    {
                        this.state.array.map((item,index)=>{
                            return(
                                <div className='CardOne' key={index}>
                                    <div>
                                        <div className='left'>
                                            <span>
                                                <Icon type='check' style={{display:item.checked?'inline':'none'}}></Icon>
                                            </span>
                                        </div>
                                        <div className='middle'>
                                            <img src={item.img} alt=""/>
                                        </div>
                                        <div className='right'>
                                            <p className='shengluehao title'>{item.titleName.trim()}</p>
                                            <p className='content'>{item.content.trim()}</p>
                                            <p className='price'>
                                                ￥{item.price}
                                            </p>
                                        </div>
                                    </div>
                                    <span className='X'>X</span>
                                </div>
                            )
                        })
                    }
                </div>
                <div className='foot'>
                    <div className='left'>
                          <span><Icon type='check' style={{display:1?'inline':'none'}}></Icon></span>
                          <i>全选</i>
                    </div>
                    <div className='middle'>
                        <i>清空</i>
                        <span>合计：<span>￥{this.state.sum}元</span></span>
                    </div>
                    <div className='right'>
                        去结算（0）
                    </div>
                </div>
            </div>
        );
    }
}

export default Card;
